<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>信息展示页</title>


	<style>
		table,th,td{
			border-collapse: collapse;
			border: aquamarine 2px solid;
		}

		img {
			width: 140px;
			height: 60px;
		}

		#ren{
			float:right;
		}
	</style>


	<script src="js/jquery-3.6.0.min.js"></script>
	<script src="js/axios-0.18.0.js"></script>

</head>
<body>

	<div id="ren"></div>


	<a href="insert.html">新增商品</a>

	<input type="text" placeholder="起始价格" id="begin">
	<input type="text" placeholder="结束价格" id="end">
	<input type="button" value="搜索" onclick="sou()">

	<input type="button" value="导出" onclick="daochu()">

	<table>
		<thead>
			<tr>
				<td>id</td>
				<td>goods_name</td>
				<td>goods_price</td>
				<td>goods_des</td>
				<td>goods_insert_time</td>
				<td>goods_update_time</td>
				<td>goods_img</td>
				<td>del</td>
				<td>upd</td>
			</tr>
		</thead>
		<tbody id="tbody1">

		</tbody>
	</table>
	<input type="button" value="首页" onclick="firstPage()">
	<input type="button" value="上一页" onclick="prePage()">
	<input type="button" value="下一页" onclick="nextPage()">
	<input type="button" value="尾页" onclick="lastPage()">
	<br>

</body>

<script>
	// 记录当前页码的全局变量
	let page = 1;
	// 用来记录总页码的全局变量  同时也作为尾页页码数据
	let pageNum = 0;

	// 页面加载函数
	$(function(){
		let username = window.location.search;  // ?z123456
		username = username.substring(1,username.length);
		document.getElementById("ren").innerText = username;

		axios.get("selPage.do?page=1").then(function (response){
			let arr = response.data;
			console.log(arr);
			for (let i = 0;i < arr.length;i++){
				createTr(arr[i]);
			}
		});

		axios.get("getPageNum.do").then(function(response){
			pageNum = parseInt(response.data);
		});

	});

	// 用来创建  表格中每一行的函数
	function createTr(e) {

		let a1 = $("<td></td>").text(e.id);
		let a2 = $("<td></td>").text(e.goods_name);
		let a3 = $("<td></td>").text(e.goods_price);
		let a4 = $("<td></td>").text(e.goods_des);
		let a5 = $("<td></td>").text(e.goods_insert_time);
		let a6 = $("<td></td>").text(e.goods_update_time);
		let a7 = $("<td></td>").html("<img src='" + e.goods_img + "'/>");
		let a8 = $("<td></td>").html("<input type='button' value='删除' onclick='del(" + e.id + ")'>");
		let a9 = $("<td></td>").html("<input type='button' value='修改' onclick='upd(" + e.id + ")'>");

		let tr1 = $("<tr></tr>").append(a1).append(a2).append(a3).append(a4).append(a5).append(a6).append(a7).append(a8).append(a9);
		$("#tbody1").append(tr1);
	}

	// 首页
	function firstPage(){
		axios.get("selPage.do?page=1").then(function (response){
			let arr = response.data;
			$("#tbody1").empty();
			page = 1;
			for (let i = 0;i < arr.length;i++){
				createTr(arr[i]);
			}
		});
	}

	// 上一页
	function prePage(){
		if(page - 1 == 0){
			return ;
		}

		page--;

		axios.get("selPage.do?page=" + page).then(function (response){
			let arr = response.data;
			$("#tbody1").empty();
			for (let i = 0;i < arr.length;i++){
				createTr(arr[i]);
			}
		});
	}

	// 下一页
	function nextPage(){

		if(page + 1 > pageNum){
			return ;
		}

		page++;

		axios.get("selPage.do?page=" + page).then(function (response){
			let arr = response.data;
			$("#tbody1").empty();
			for (let i = 0;i < arr.length;i++){
				createTr(arr[i]);
			}
		});
	}

	// 尾页
	function lastPage(){
		axios.get("selPage.do?page=" + pageNum).then(function (response){
			let arr = response.data;
			$("#tbody1").empty();
			page = pageNum;
			for (let i = 0;i < arr.length;i++){
				createTr(arr[i]);
			}
		});
	}

	// 删除功能
	function del(e){
		window.location.href = "del.do?id=" + e;
	}

	// 修改功能
	function upd(e){
		window.location.href = "update.html?" + e;
	}


	function sou(){
		let beginPrice = $("#begin").val();
		let endPrice = $("#end").val();

		axios.get("sou.do?b=" + beginPrice + "&e=" + endPrice).then(function (response){
			let arr = response.data;
			$("#tbody1").empty();
			for (let i = 0;i < arr.length;i++){
				createTr(arr[i]);
			}
		});
	}


	function daochu(){
		window.location.href = "selAll.do";
	}



</script>




</html>